<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit"/>
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=0.9,minimum-scale=0.9,viewport-fit=cover">
    <meta http-Equiv="Cache-Control" Content="no-cache"/>
    <meta http-Equiv="Pragma" Content="no-cache"/>
    <meta http-Equiv="Expires" Content="0"/>
    <title>LYADMINUI系统管理后台</title>
    <style>
        *{margin:0;padding:0;font-family:PingFangSC-Light,"\5FAE\8F6F\96C5\9ED1","\5FAE\8F6F\96C5\9ED1","Microsoft YaHei",Helvetica,Tahoma,sans-serif}
        html,body{width:100%;height:100%}
        #message{text-align:center;height:40px;padding:0 10px;line-height:40px;color:#f56c6c;font-size:14px;font-weight:400}
        .page{position:relative;height:100%;min-width:1200px;min-height:730px;background-image:url('//job-job.duoyun6.com/static/pc/signin_alertview_img_pic.png');background-size:720px 592px,100% 100%;background-repeat:no-repeat;background-position:0 108px,0 0;background-color:#030f53}
        .login-from{position:absolute;left:60%;top:50%;padding-bottom:40px;transform:translateY(-50%);border-radius:4px;border:1px solid #E6E6E6;box-shadow:0 2px 12px 0 rgb(0 0 0 / 10%);background-color:#fff;transition:.3s;overflow:hidden;color:#475669}
        .login-title{padding:18px 20px;border-bottom:1px solid #E6E6E6;box-sizing:border-box}
        .login-from-item{display:flex;align-items:center;margin-left:40px;margin-right:40px;margin-bottom:20px}
        .login-from-label{width:62px;text-align:right;vertical-align:middle;float:left;font-size:14px;color:#667586;line-height:40px;padding:0 12px 0 0}
        .login-from-input{-webkit-appearance:none;background-color:#FFF;background-image:none;border-radius:4px;border:1px solid #e4e7eb;box-sizing:border-box;color:#000;display:inline-block;font-size:14px;height:40px;line-height:40px;outline:0;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:288px}
        #login-from-button{width:288px;color:#FFF;background-color:#3793FF;display:block;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid #C0CCDA;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:0;transition:.1s;font-weight:500;padding:12px 20px;font-size:14px;border-radius:4px}
        #login-from-button:hover{background-color:#3793ffd4}
        @media screen and (max-width:600px){.page{min-width:auto;min-height:auto;background-image:none}
            .login-from{left:50%;top:25%;transform:translateX(-50%);padding-bottom:20px}
            .login-from-item{margin-left:0;margin-right:15px}
        }
        .loading-mask{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0000001a;z-index:2000;opacity:0}
        .loading-mask-show{display:block;opacity:1}
        .loading-spinner{top:50%;margin-top:-25px;width:100%;text-align:center;position:absolute}
        .loading{margin:auto;width:16px;height:16px;background-image:url('//cdn.static.magcloud.net/job/static/pc/pc_login_loading_0512_2.gif');background-size:contain}
        .loading-text{color:#409EFF;margin:3px 0;font-size:14px}
        .login-from-input:disabled{background:#f4f5f7}
    </style>
</head>
<link rel="stylesheet" type="text/css" href="/static/ly/libs/lyverify/index.css"/>
<body>

<div class="page">
    <div class="login-from">
        <div class="login-title">LYADMINUI后台系统</div>
        <div id="message"></div>
        <div class="login-from-item">
            <div class="login-from-label">账 号 :</div>
            <input type="text" autocomplete="off" id="account" placeholder="请输入账号" class="login-from-input">
        </div>
        <div class="login-from-item">
            <div class="login-from-label">密 码 :</div>
            <input type="password" autocomplete="off" id="password" placeholder="请输入密码" class="login-from-input">
        </div>
        <div class="login-from-item">
            <div class="login-from-label">验证码 :</div>
            <div id="verify-container"></div>
        </div>
        <div class="login-from-item">
            <div class="login-from-label"></div>
            <button onclick="onSubmit()" id="login-from-button">登录</button>
        </div>
    </div>
    <div id="loading-mask" class="loading-mask">
        <div class="loading-spinner">
            <div class="loading"></div>
            <div class="loading-text">登录中...</div>
        </div>
    </div>
</div>
</body>
<script src="/static/ly/libs/lyverify/index.js"></script>
<script>
    //验证成功后的token
    var verify_token = '';
    //构建验证器
    var verify = LyVerify.slide({
        sense: true,
        sense_scene: 'login',
        container: "#verify-container",
        codeUrl: '/captcha/slideCode',
        checkUrl: '/captcha/slideCheck',
        senseUrl: '/captcha/senseCheck',
        hidePanel: true,
        checkParams: function () {
            var account = document.getElementById('account').value.trim();
            var password = document.getElementById('password').value.trim();
            return {
                account: account,
                password: password
            };
        },
        success: function (rs) {
            verify_token = rs.token;
            document.getElementById('account').disabled = true;
            document.getElementById('password').disabled = true;
        }
    });

    /**
     * 获取提交数据
     */
    function getForm() {
        var account = document.getElementById('account').value.trim();
        var password = document.getElementById('password').value.trim();
        if (!account) {
            showMessage('请填写账号');
            throw '请填写账号';
        }
        if (!password) {
            showMessage('请填写密码');
            throw '请填写密码';
        }
        if (!verify_token) {
            showMessage('请完成验证码');
            throw '请完成验证码';
        }
        return {
            account: account,
            password: password,
            token: verify_token,
        };
    }

    //防止重复提交
    var isSubmit = false;

    /**
     * 提交表单
     */
    function onSubmit() {
        var form = getForm();
        if (isSubmit) {
            return;
        }
        isSubmit = true;
        showLoading();
        ajaxPost('/home/login', form).then(function (rs) {
            if (!rs.success) {
                throw rs.msg;
            }
            location.href = "/portal/";
        }).catch(function (msg) {
            if (typeof (msg) !== 'string') {
                msg = '操作失败,请重试';
            }
            document.cookie = 'auth-token=' + ";expires=" + new Date().toGMTString();
            isSubmit = false;
            document.getElementById('account').disabled = false;
            document.getElementById('password').disabled = false;
            hideLoading();
            verify.reset();
            showMessage(msg);
        });
    }

    /**
     * 显示错误信息
     * @param text
     */
    function showMessage(text) {
        var message = document.getElementById('message');
        message.innerText = text;
    }

    /**
     * 显示 loading
     */
    function showLoading() {
        document.getElementById('loading-mask').classList.add('loading-mask-show');
    }
    /**
     * 隐藏loading
     */
    function hideLoading() {
        document.getElementById('loading-mask').classList.remove('loading-mask-show');
    }

    /**
     *  网络 post 提交
     * @param url
     * @param obj
     * @returns {Promise<unknown>}
     */
    function ajaxPost(url, obj) {
        return new Promise(function (success, fail) {
            var request = null;
            if (window.XMLHttpRequest) {
                request = new XMLHttpRequest();//W3C
            } else {
                request = new ActiveXObject('MicroSoft.XMLHTTP');//IE
            }
            request.open('POST', url, true);
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    var val = request.responseText;
                    var type = request.getResponseHeader('content-type');
                    if (type.indexOf('json') > 0) {
                        val = JSON.parse(val);
                    }
                    success(val);
                }
                if (request.readyState === 4 && (request.status >= 400)) {
                    fail(request);
                }
            };
            request.onerror = function (e) {
                fail(e);
            };
            request.setRequestHeader("Content-Type"
                , "application/json");
            request.send(JSON.stringify(obj));
        });
    }
</script>
</html>